<template>
  <div class=" container" >
        <div class="my_table">
            <el-table :data="List1.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
            style="{width: '100%',background-color:'#10254a'}" :header-cell-style= "{color: '#edef5c',height: '40px',background:'#10254a'}" 
            row-class-name="rows"
            :cell-style="columncolorStyle">
                <el-table-column
                    prop="type"
                    label="在线个数"
                    width="180"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="具体型号"
                    width="180"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="img"
                    label="上线时间"
                    width="180"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="number"
                    label="下线时间"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="在线历史记录"
                    align="center">
                </el-table-column>
            </el-table>
        </div>
        <div class="row">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="List1.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name:'Aimanage',
    data() {
        return {
            
        }
    },
    methods: {
        handleSizeChange: function(size) {
            this.pagesize = size
            console.log(this.pagesize) // 每页下拉显示数据
        },
        handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage
        console.log(this.currentPage) // 点击第几页
        },
    },
}
</script>

<style>
@media screen and (min-width:1280px) {
    .container{
        position: relative;
        width:1280px;
    }
}
</style>